<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/8/17
  Time: 14:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
    <head>
    <title>Gateway Client</title>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="resources/css/bootstrap.min.css">
    <style>
        button {
            width: 110px;
            clear: both;
        }
        textarea {
            width: 425px;
            height: 150px;
        }
        aside {
            float: left;
            display: inline;
        }
        h4, h5 {
            text-align: center;
        }
        .div_status, .div_data, .div_heartBeat, .div_setting {
            float: left;
            width: 750px;
            margin: 5px;
            border: 2px solid white;
            display: none;
        }
        .div_send, .div_get {
            float: left;
            width: 425px;
            margin: 5px;
            border: 2px solid white;
        }
        .modal-footer {
            clear: both;
            display: none;
        }
        .modal-lg {
            margin: 0 auto;
        }
        .div_message_dialog, .div_setting_dialog {
            float: right;
        }
    </style>
    </head>
    <body>
    <div class="modal-lg">
        <div class="modal-header">
            <h4 class="modal-title">Gateway Monitor</h4>
        </div>
        <div class="modal-body">
            <aside>
                <div>
                    <button id="btn_sendStatus" class="btn btn-link">SendStatus</button>
                </div>
                <div>
                    <button id="btn_sendMessage" class="btn btn-link">SendData</button>
                </div>
                <div>
                    <button id="btn_heartBeat" class="btn btn-link">HeartBeat</button>
                </div>
                <div>
                    <button id="btn_settingSystem" class="btn btn-link">Setting</button>
                </div>
            </aside>
            <div class="div_status">
                <div class="form-horizontal">
                    <h5>Status data</h5>
                    <div class="form-group">
                        <label for="status_machineId" class="col-sm-2 control-label">Id:</label>
                        <div class="col-sm-10">
                            <input id="status_machineId" name="status_machineId" type="text" class="form-control"
                                placeholder="please input the machine id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="status_type" class="col-sm-2 control-label">Type:</label>
                        <div class="col-sm-10">
                            <input id="status_type" name="status_type" type="number" class="form-control"
                                placeholder="please input the sensor's usage type">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="status_value" class="col-sm-2 control-label">Value:</label>
                        <div class="col-sm-10">
                            <input id="status_value" name="status_value" type="number" class="form-control"
                                placeholder="please input the sensor's status">
                        </div>
                    </div>
                    <div class="div_message_dialog">
                        <button id="btn_sendStatus_start" class="btn btn-primary">Start</button>
                        <button id="btn_sendStatus_stop" class="btn btn-primary">Stop</button>
                    </div>
                </div>
            </div>
            <div class="div_data">
                <div class="form-horizontal">
                    <h5>Raw data</h5>
                    <div class="form-group">
                        <label for="data_version" class="col-sm-2 control-label">Version:</label>
                        <div class="col-sm-10">
                            <input id="data_version" name="data_version" type="number" class="form-control"
                                placeholder="please input raw data version">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="data_gatewayId" class="col-sm-2 control-label">GW ID:</label>
                        <div class="col-sm-10">
                            <input id="data_gatewayId" name="data_gatewayId" type="text" class="form-control"
                                placeholder="please input the gateway id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="data_machineId" class="col-sm-2 control-label">MT ID:</label>
                        <div class="col-sm-10">
                            <input id="data_machineId" name="data_machineId" type="text" class="form-control"
                                   placeholder="please input the gateway id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="data_portNumber" class="col-sm-2 control-label">Port NO:</label>
                        <div class="col-sm-10">
                            <input id="data_portNumber" name="data_portNumber" type="number" class="form-control"
                                placeholder="please input the sensor's connected port number">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="data_sensorType" class="col-sm-2 control-label">Sensor Type:</label>
                        <div class="col-sm-10">
                            <input id="data_sensorType" name="data_sensorType" type="number" class="form-control"
                                   placeholder="please input the sensor's connected port number">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="data_data" class="col-sm-2 control-label">Data:</label>
                        <div class="col-sm-10">
                            <input id="data_data" name="data_data" type="text" class="form-control"
                                placeholder="please input the data of double or comma separated double">
                        </div>
                    </div>
                    <div class="div_message_dialog">
                        <button id="btn_sendMessage_start" class="btn btn-primary">Start</button>
                        <button id="btn_sendMessage_stop" class="btn btn-primary">Stop</button>
                    </div>
                </div>
            </div>
            <div class="div_heartBeat">
                <div class="form-horizontal">
                    <h5>Heart beat</h5>
                    <div class="form-group">
                        <label for="watch_version" class="col-sm-2 control-label">Version:</label>
                        <div class="col-sm-10">
                            <input id="watch_version" name="watch_version" type="number" class="form-control"
                                   placeholder="please input raw data version">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="watch_id" class="col-sm-2 control-label">Id:</label>
                        <div class="col-sm-10">
                            <input id="watch_id" name="watch_id" type="text" class="form-control"
                                   placeholder="please input the gateway's identity">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="watch_ports" class="col-sm-2 control-label">Ports:</label>
                        <div class="col-sm-10">
                            <input id="watch_ports" name="watch_ports" type="text" class="form-control"
                                   placeholder="please input the ports [{number: 0, status: 1},{number: 1, status: 0}]">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="watch_power" class="col-sm-2 control-label">Power:</label>
                        <div class="col-sm-10">
                            <input id="watch_power" name="watch_power" type="number" min="0" max="1" class="form-control"
                                   placeholder="please input the gateway's power status, 0/1">
                        </div>
                    </div>
                    <div class="div_message_dialog">
                        <button id="btn_heartBeat_start" class="btn btn-primary">Start</button>
                        <button id="btn_heartBeat_stop" class="btn btn-primary">Stop</button>
                    </div>
                </div>
            </div>
            <div class="div_setting">
                <div class="form-horizontal">
                    <h5>System Setting</h5>
                    <div class="form-group">
                        <label for="setting_host" class="col-sm-2 control-label">Host:</label>
                        <div class="col-sm-10">
                            <input id="setting_host" name="setting_host" type="text" class="form-control"
                                   placeholder="please input the server host">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="setting_port" class="col-sm-2 control-label">Port:</label>
                        <div class="col-sm-10">
                            <input id="setting_port" name="setting_port" type="number" min="0" class="form-control"
                                   placeholder="please input the server port">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="setting_action" class="col-sm-2 control-label">Action:</label>
                        <div class="col-sm-10">
                            <input id="setting_action" name="setting_action" type="text" class="form-control"
                                   placeholder="please input the action">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="setting_method" class="col-sm-2 control-label">Method:</label>
                        <div class="col-sm-10">
                            <input id="setting_method" name="setting_method" type="text" class="form-control"
                                   placeholder="please input the method GET/POST">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="setting_heartBeat" class="col-sm-2 control-label">HeartBeat(s):</label>
                        <div class="col-sm-10">
                            <input id="setting_heartBeat" name="setting_heartBeat" type="number" min="1" class="form-control"
                                   placeholder="please input the heart beat interval">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="setting_stress" class="col-sm-2 control-label">Stress(/s):</label>
                        <div class="col-sm-10">
                            <input id="setting_stress" name="setting_stress" type="number" min="1" class="form-control"
                                   placeholder="please input the heart beat interval">
                        </div>
                    </div>
                </div>
                <div class="div_setting_dialog">
                    <button id="btn_setting_ok" class="btn btn-primary">Ok</button>
                    <button id="btn_setting_reset" class="btn btn-primary">Reset</button>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="div_send">
                <label for="text_input">Send</label>
                <textarea id="text_input"></textarea>
            </div>
            <div class="div_get">
                <label for="text_output">Response</label>
                <textarea id="text_output"></textarea>
            </div>
        </div>
    </div>
    </body>
    <!-- jQuery 2.1.4 -->
    <script src="resources/js/jquery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="resources/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            var timer;

            $('#setting_host').val('localhost');
            $('#setting_port').val('8443');
            $('#setting_action').val('MonitorGateway');
            $('#setting_method').val('POST');
            $('#setting_heartBeat').val('5');
            $('#setting_stress').val('1');
            $('#status_machineId').val('A01234');
            $('#status_type').val('1');
            $('#status_value').val('1');
            $('#data_version').val('1');
            $('#data_gatewayId').val('A0123456');
            $('#data_machineId').val('A01234');
            $('#data_portNumber').val('1');
            $('#data_sensorType').val('1');
            $('#data_data').val('1.1,2,1,1.1');
            $('#watch_version').val('1');
            $('#watch_id').val('A0123456');
            $('#watch_ports').val('[{number: 0, status: 1},{number: 1, status: 0}]');
            $('#watch_power').val('1');

            $('#btn_sendStatus').click(function () {
                $('.div_status').attr('style', 'display:block');
                $('.div_data').attr('style', 'display:none');
                $('.div_heartBeat').attr('style', 'display:none');
                $('.div_setting').attr('style', 'display:none');
                $('.modal-footer').attr('style', 'display:none');
            });

            $('#btn_sendMessage').click(function () {
                $('.div_data').attr('style', 'display:block');
                $('.div_status').attr('style', 'display:none');
                $('.div_heartBeat').attr('style', 'display:none');
                $('.div_setting').attr('style', 'display:none');
                $('.modal-footer').attr('style', 'display:none');
            });

            $('#btn_heartBeat').click(function () {
                $('.div_heartBeat').attr('style', 'display:block');
                $('.div_status').attr('style', 'display:none');
                $('.div_data').attr('style', 'display:none');
                $('.div_setting').attr('style', 'display:none');
                $('.modal-footer').attr('style', 'display:none');
            });

            $('#btn_settingSystem').click(function () {
                $('.div_setting').attr('style', 'display:block');
                $('.div_heartBeat').attr('style', 'display:none');
                $('.div_status').attr('style', 'display:none');
                $('.div_data').attr('style', 'display:none');
                $('.modal-footer').attr('style', 'display:none');
            });

            $('#btn_sendStatus_start').click(function () {
                $('.modal-footer').attr('style', 'display:block');
                $('#btn_sendStatus_start').attr('disabled',"true");
                $('#btn_sendStatus_stop').removeAttr("disabled");
                var id = $('#status_machineId').val();
                var type = $('#status_type').val();
                var value = $('#status_value').val();
                var stress = $('#setting_stress').val();
                var data = {
                    id: id,
                    type: type,
                    value: value
                };

                timer = window.setInterval(function() {
                    var inputText = $('#text_input');
                    var outputText = $('#text_output');
                    var lastInput = inputText.val() == '' ? inputText.val() : '\r\n' + inputText.val();

                    inputText.val(JSON.stringify(data) + lastInput);
                    $.post('/SendMessage', {
                        host: $('#setting_host').val(),
                        port: $('#setting_port').val(),
                        action: $('#setting_action').val(),
                        method: $('#setting_method').val(),
                        requester: 'status',
                        data: JSON.stringify(data)
                    }, function (data, status) {
                        if (status == 'success') {
                            outputText.val(data + outputText.val());
                        } else {
                            alert("data=" + data + "status=" + status);
                        }
                    });
                }, 1000 / stress);
            });

            $('#btn_sendStatus_stop').click(function () {
                window.clearInterval(timer);
                $('#btn_sendStatus_stop').attr('disabled',"true");
                $('#btn_sendStatus_start').removeAttr("disabled");
                $('#text_input').val('');
                $('#text_output').val('');
                $('.modal-footer').attr('style', 'display:none');
            });

            $('#btn_sendMessage_start').click(function () {
                $('.modal-footer').attr('style', 'display:block');
                $('#btn_sendMessage_start').attr('disabled',"true");
                $('#btn_sendMessage_stop').removeAttr("disabled");
                var version = $('#data_version').val();
                var gatewayId = $('#data_gatewayId').val();
                var machineId = $('#data_machineId').val();
                var port = $('#data_portNumber').val();
                var sensorType = $('#data_sensorType').val();
                var rawData = $('#data_data').val();
                var stress = $('#setting_stress').val();
                var data = {
                    version: version,
                    gatewayId: gatewayId,
                    machineId: machineId,
                    port: port,
                    sensorType: sensorType,
                    rawData: rawData
                };

                timer = window.setInterval(function () {
                    var inputText = $('#text_input');
                    var outputText = $('#text_output');
                    var lastInput = inputText.val() == '' ? inputText.val() : '\r\n' + inputText.val();

                    inputText.val(JSON.stringify(data) + lastInput);
                    $.post('/SendMessage', {
                        host: $('#setting_host').val(),
                        port: $('#setting_port').val(),
                        action: $('#setting_action').val(),
                        method: $('#setting_method').val(),
                        requester: 'message',
                        data: JSON.stringify(data)
                    }, function (data, status) {
                        if (status == 'success') {
                            outputText.val(data + outputText.val());
                        } else {
                            alert("data=" + data + "status=" + status);
                        }
                    });
                }, 1000 / stress);
            });

            $('#btn_sendMessage_stop').click(function () {
                window.clearInterval(timer);
                $('#btn_sendMessage_stop').attr('disabled',"true");
                $('#btn_sendMessage_start').removeAttr("disabled");
                $('#text_input').val('');
                $('#text_output').val('');
                $('.modal-footer').attr('style', 'display:none');
            });

            $('#btn_heartBeat_start').click(function () {
                $('.modal-footer').attr('style', 'display:block');
                $('#btn_heartBeat_start').attr('disabled',"true");
                $('#btn_heartBeat_stop').removeAttr("disabled");
                var version = $('#watch_version').val();
                var id = $('#watch_id').val();
                var ports = $('#watch_ports').val();
                var power = $('#watch_power').val();
                var interval = $('#setting_heartBeat').val();
                var data = {
                    version: version,
                    id: id,
                    ports: ports,
                    power: power
                };

                timer = window.setInterval(function() {
                    var inputText = $('#text_input');
                    var outputText = $('#text_output');
                    var lastInput = inputText.val() == '' ? inputText.val() : '\r\n' + inputText.val();

                    inputText.val(JSON.stringify(data) + lastInput);
                    $.post('/SendMessage', {
                        host: $('#setting_host').val(),
                        port: $('#setting_port').val(),
                        action: $('#setting_action').val(),
                        method: $('#setting_method').val(),
                        requester: 'heartBeat',
                        data: JSON.stringify(data)
                    }, function (data, status) {
                        if (status == 'success') {
                            outputText.val(data + outputText.val());
                        } else {
                            alert("data=" + data + "status=" + status);
                        }
                    });
                }, interval * 1000);
            });

            $('#btn_heartBeat_stop').click(function () {
                window.clearInterval(timer);
                $('#btn_heartBeat_stop').attr('disabled',"true");
                $('#btn_heartBeat_start').removeAttr("disabled");
                $('#text_input').val('');
                $('#text_output').val('');
                $('.modal-footer').attr('style', 'display:none');
            });

            $('#btn_setting_ok').click(function () {
                $('.div_setting').attr('style', 'display:none');
            });

            $('#btn_setting_reset').click(function () {
                $('.div_setting').attr('style', 'display:none');
                $('#setting_host').val('localhost');
                $('#setting_port').val('8443');
                $('#setting_action').val('MonitorGateway');
                $('#setting_method').val('POST');
                $('#setting_heartBeat').val('5');
                $('#setting_stress').val('1');
            });
        });
    </script>
</html>
